<template>
  <div>
    <div class="box1">
      <div class="box1-left">
        <div class="box1-top">
          <div class="box1-top1">
            <div class="hander">
              <div class="title">
                工单统计
                <span class="sub-title">2023.05.01 ~ 2023.05.23</span>
              </div>
            </div>
            <div class="body">
              <div class="stats">
                <div class="item">
                  <div class="num">28</div>
                  <div class="text">工单总数（个）</div>
                </div>
              </div>
              <div class="stats">
                <div class="item">
                  <div class="num">28</div>
                  <div class="text">工单总数（个）</div>
                </div>
              </div>
              <div class="stats">
                <div class="item">
                  <div class="num">28</div>
                  <div class="text">工单总数（个）</div>
                </div>
              </div>
              <div class="stats">
                <div class="item">
                  <div class="num">28</div>
                  <div class="text">工单总数（个）</div>
                </div>
              </div>
            </div>
          </div>
          <div class="box1-top2">
            <div class="hander">
              <div class="title">
                销售统计
                <span class="sub-title">2023.05.01 ~ 2023.05.23</span>
              </div>
            </div>
            <div class="body">
              <div class="stats">
                <div class="item">
                  <div class="num">{{ orderCount }}</div>
                  <div class="text">订单量（个）</div>
                </div>
              </div>
              <div class="stats">
                <div class="item">
                  <div class="num">{{ orderAmount/100 }}</div>
                  <div class="text">销售额（元）</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="box1-bottom">echars 图</div>
      </div>
      <div class="box1-right">
        <div class="hander">
          商品热榜
          <span class="sub-title">2023.05.01 ~ 2023.05.23</span>
        </div>
        <div class="rank-item">
          <el-row v-for="(item, index) in topTen" :key="item.index" class="row-item">
            <el-col class="col-item" :span="5">{{ index + 1 }}</el-col>
            <el-col :span="13">{{ item.skuName }}</el-col>
            <el-col class="count-item" :span="6">{{ item.count }}单</el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="box2">
      <div class="box2-left" />
      <div class="box2-right" />
    </div>
  </div>
</template>
<script>
import { formatTimestamp } from '@/utils/formatTimestamp'
import { getTopTen, getOrderCount, getOrderAmount } from '@/api/dikede'
export default {
  data() {
    return {
      timeFrom: {
        topValue: 10,
        start: '',
        end: ''
      },
      topTen: [],
      nowTime: '',
      orderCount: '',
      orderAmount: ''
    }
  },
  created() {
    this.formatTimestamp()
    this.getOrderCount()
    this.getOrderAmount()
  },
  methods: {
    async formatTimestamp() {
      this.nowTime = formatTimestamp(+new Date())
      this.timeFrom = {
        topValue: 10,
        start: '2023-05-01',
        end: this.nowTime
      }
      const ress = await getTopTen(this.timeFrom)
      this.topTen = ress.sort((a, b) => {
        return b.count - a.count
      })
      console.log(this.topTen)
    },
    async getOrderCount() {
      const res = await getOrderCount({
        start: '2023-05-01 00:00:00',
        end: `${this.nowTime} 23:59:59`
      })
      this.orderCount = res
    },
    async getOrderAmount() {
      const res = await getOrderAmount({
        start: '2023-05-01 00:00:00',
        end: `${this.nowTime} 23:59:59`
      })
      this.orderAmount = res
    }
  }
}
</script>

<style scoped>
.box1 {
  display: flex;
  height: 558px;
}
.box1-left {
  display: flex;
  flex-direction: column;
  width: 75%;
}
.box1-right {
  border-radius: 20px;
  margin: 0 10px;
  padding: 20px;
  width: 25%;
  background-color: #fff;
  margin-bottom: 20px;
}
.rank-item {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* justify-content: space-around; */
  flex: 1;
}
.row-item{
  height: 24px;
  margin-top: 24px ;
  font-size: 14px;
  color:#333
}
.count-item{
  padding-left: 30px;
}
.col-item:first-child{
  color: #8e5900;
}
.row-item:first-child{
  margin-top:22px ;
  background: url() no-repeat ;
  background-position: 12px -2px;
}
.row-item:nth-child(2){
  background: url() no-repeat;
  background-position: 12px -2px;
}
.row-item:nth-child(3){
  background: url() no-repeat;
  background-position: 12px -2px;
}
.col-item{
  width: 16px;
  height: 20px;
  display: inline-block;
  width: 16px;
  height: 20px;
  text-align: center;
  color: #e9b499;
  font-size: 12px;
  font-family: zihun143-zhengkuchaojihei,zihun143;
  font-weight: 400;
  line-height: 14px;
  margin: 0 15px;
  margin-right: 35px;
}
.row-item:nth-child(n+4){
  background: url() no-repeat;
  background-position: 15px -2px;
}
.box1-top{
  display: flex;
}
.box1-top1 {
  border-radius: 20px;
  margin: 0 10px;
  padding: 20px;
  background-color: #ADD8E6;
  height: 166px;
  width: 55%;
  background: #e9f3ff;
  background-image: url(),url('../../assets/task.66b715b7.png');
  background-repeat: no-repeat,no-repeat;
  background-position: 0 0,calc(100% - 12px) 100%;
}
.box1-top1 .body{
  display: flex;
  width: 100%;
  height: 100%;
}
.box1-top2 .body{
  display: flex;
  width: 100%;
  height: 100%;
}
.box1-top1 .body .stats{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.box1-top2 .body .stats{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}
.box1-top1 .body .num{
  height: 50px;
  font-size: 36px;
  font-family: PingFangSC-Semibold,PingFang SC;
  font-weight: 600;
  line-height: 50px;
  color: #072074;
  text-shadow: 2px 4px 7px rgba(85,132,255,.5);
}
.box1-top2 .body .num{
  height: 50px;
  font-size: 36px;
  font-family: PingFangSC-Semibold,PingFang SC;
  font-weight: 600;
  line-height: 50px;
  color: #ff5757;
  text-shadow: 2px 4px 7px rgba(255,99,85,.5);
}
.box1-top1 .body .text{
  height: 17px;
  margin-top: 3px;
  font-size: 12px;
  font-family: PingFangSC-Regular,PingFang SC;
  font-weight: 400;
  color: #91a7dc;
  line-height: 17px;
}
.box1-top2 .body .text{
  height: 17px;
  margin-top: 3px;
  font-size: 12px;
  font-family: PingFangSC-Regular,PingFang SC;
  font-weight: 400;
  color: #de9690;
  line-height: 17px;
}
.hander{
  display: flex;
  align-items: center;
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.sub-title{
  margin-left: 10px;
  font-size: 12px;
  font-weight: 400;
  color: #999;
}
.box1-top2 {
  border-radius: 20px;
  margin: 0 10px;
  padding: 20px;
  background-color: #FFDAB9;
  height: 166px;
  width: 45%;
  background: #fbefe8 url('../../assets/sale.606b0d8c.png') no-repeat calc(100% - 12px) 100%;
}
.box1-top2 .body{
  display: flex;
  justify-content: center;
  align-items: center;
}
.box1-bottom {
  border-radius: 20px;
  margin: 20px 10px;
  padding: 20px;
  background-color: #FFA07A;
  height: 350px;
}
.box2 {
  display: flex;
  height: 353px;
}
.box2-left {
  border-radius: 20px;
  margin: 0 10px;
  margin-bottom: 20px;
  padding: 20px;
  width: 60%;
  background-color: #FA8072;
}
.box2-right {
  border-radius: 20px;
  margin: 0 10px;
  padding: 20px;
  width: 40%;
  margin-bottom: 20px;
  background-color: #90EE90;
}
</style>
